<template>
    <svg class="iconfont" aria-hidden="true" @click="handleClick"
         :style="{width:size+'em',height:size+'em'}">
        <use :xlink:href="'#' + icon"></use>
    </svg>
</template>

<script type="text/ecmascript-6">
  /**
   * @author 白雨浓
   * @date 2018/12/4 15:52
   *
   * iconfont
   **/
  export default {
    name: 'Icon',
    props: {
      icon: {
        type: String,
        required: true
      },
      size: {
        type: Number
      }
    },
    methods: {
      handleClick(evt) {
        this.$emit('click', evt);
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .iconfont {
        width 1em
        height 1em
        vertical-align -0.15em
        fill currentColor
        overflow: hidden
    }
</style>
